import React, { useEffect } from 'react'
import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { Tabs } from '@nutui/nutui-react-taro'
import { livestockReport, abnormalDeviceList, yzsList, yzShjInfo, ycSbInfo } from '../../api/sy'
import dayjs from 'dayjs'
import AppHeader from '../../components/app-header/AppHeader'
import './index.scss'

export default function Index() {

    // 选项卡（养殖棚）
    const [tabValue, setTabValue] = useState('0')
    // 当前时间
    const [nowTime,setNowTime] = useState(0)

    // 牲畜报道信息
    const [livestock, setLivestock] = useState({
        dueNum: '',
        arrivedNum: '',
        noNum: '',
        errNum: '',
        videoNum: ''
    })
    const livestockReports = async () => {
        const res = await livestockReport({ orgid: '' })
        // console.log(res.data);
        const data = res.data
        setLivestock({
            dueNum: data.ybdnum,
            arrivedNum: data.bdnum,
            noNum: data.wbdnum,
            errNum: data.ycsbnum,
            videoNum: data.videosbnum
        })
    }

    // 养殖棚列表
    const [cultureInfo, setCultureInfo] = useState([])
    const [tabItemValue, setTabItemValue] = useState({})
    const cultureList = async () => {
        const res = await yzsList({ orgid: '' })
        setCultureInfo(res.data)
        const data = res.data
        // 养殖环境信息
        const rest = await yzShjInfo({ houseid: data[tabValue].F_Id })
        console.log(rest.data[0]);
        setTabItemValue(rest.data[0])
    }

    // 异常设备列表
    const errEquipmentList = async () => {
        console.log(cultureInfo[tabValue].F_Org_Id);
        console.log(tabItemValue);
        const id = cultureInfo[tabValue].F_Org_Id
        const res = await abnormalDeviceList({
            orgid: '',
            curPage: 1,
            pageSize: 20
        })
        console.log('请求设备详情', res);
    }

    // 跳转异常设备界面
    const toErrPath = () => {
        Taro.navigateTo({
            url: '/pages/index/anomalousEquipment/AnomalousEquipment'
        })
        errEquipmentList()
    }
    // 跳转监控设备界面
    const toVideoPath = () => {
        Taro.navigateTo({
            url: '/pages/index/videoSurveillance/VideoSurveillance'
        })
    }

    // 异常详情
    // const detailList = async()=>{
    //     const res = await ycSbInfo({id:'1'})
    //     console.log(res);
    // }

    useEffect(() => {
        livestockReports()
        cultureList()
        // detailList()
        setNowTime(dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'));
    }, [tabValue])

    return (
        <>
            <AppHeader title='首页'></AppHeader>
            <View className='home-card'>
                <View className='animal-sacrifice'>
                    <Text className='title'>牲畜报道</Text>
                    <View className='time'>
                        <i className='iconfont icon-qiandao'></i>
                        <Text>00:00 ~ 15:30</Text>
                    </View>
                    <View className='arrival-situation'>
                        <View className='item'>
                            <Text className='num'>{livestock.dueNum}</Text>
                            <Text>应到</Text>
                        </View>
                        <View className='item'>
                            <Text className='num'>{livestock.arrivedNum}</Text>
                            <Text>已到</Text>
                        </View>
                        <View className='item'>
                            <Text className='num'>{livestock.noNum}</Text>
                            <Text>未到</Text>
                        </View>
                    </View>
                </View>
                <View className='equipment' onClick={toErrPath}>
                    <View className='iconfont icon-gantanhaozhong img'></View>
                    <View className='item'>
                        <Text>异常设备</Text>
                        <Text>{livestock.errNum}</Text>
                    </View>
                </View>
                <View className='equipment' onClick={toVideoPath}>
                    <View className='iconfont icon-jiankong_o img'></View>
                    <View className='item'>
                        <Text>监控设备</Text>
                        <Text>{livestock.videoNum}</Text>
                    </View>
                </View>
            </View>
            <View className='home-monitor'>
                <View className='title'>养殖棚环境监控</View>
                {/* 养殖舍详情信息 */}
                <Tabs
                    value={tabValue}
                    onChange={(value) => {
                        setTabValue(value)
                        // console.log(value);
                    }}
                    activeType='card'
                    align='left'
                >
                    {cultureInfo.map((item, index) => {
                        return <Tabs.TabPane title={item.F_Title} className='shelf'>
                            <View className='item'>
                                <View className='text'>
                                    <p className='temp'>温度</p>
                                    <p><Text>{tabItemValue.F_Temp}</Text>℃</p>
                                    <p className='date'>{nowTime}</p>
                                </View>
                                <Image className='icon-img iconfont icon-shuiwen'></Image>
                            </View>
                            <View className='item'>
                                <View className='text'>
                                    <p className='temp'>湿度</p>
                                    <p><Text>{tabItemValue.F_Humidity}</Text>%RH</p>
                                    <p className='date'>{nowTime}</p>
                                </View>
                                <Image className='icon-img iconfont icon-shuiwen'></Image>
                            </View>
                            <View className='item'>
                                <View className='text'>
                                    <p className='temp'>硫化氢</p>
                                    <p><Text>{tabItemValue.F_Pm}</Text>ppm</p>
                                    <p className='date'>{nowTime}</p>
                                </View>
                                <Image className='icon-img iconfont icon-shuiwen'></Image>
                            </View>
                            <View className='item'>
                                <View className='text'>
                                    <p className='temp'>甲烷</p>
                                    <p><Text>{tabItemValue.F_Ch}</Text>%LEL</p>
                                    <p className='date'>{nowTime}</p>
                                </View>
                                <Image className='icon-img iconfont icon-shuiwen'></Image>
                            </View>
                            <View className='item'>
                                <View className='text'>
                                    <p className='temp'>氨气</p>
                                    <p><Text>{tabItemValue.F_Ammonia}</Text>ppm</p>
                                    <p className='date'>{nowTime}</p>
                                </View>
                                <Image className='icon-img iconfont icon-shuiwen'></Image>
                            </View>
                            <View className='item'>
                                <View className='text'>
                                    <p className='temp'>二氧化碳</p>
                                    <p><Text>{tabItemValue.F_Carbon}</Text>ppm</p>
                                    <p className='date'>{nowTime}</p>
                                </View>
                                <Image className='icon-img iconfont icon-shuiwen'></Image>
                            </View>
                            <View className='item'>
                                <View className='text'>
                                    <p className='temp'>光照</p>
                                    <p><Text>{tabItemValue.F_Illumination}</Text>lux</p>
                                    <p className='date'>{nowTime}</p>
                                </View>
                                <Image className='icon-img iconfont icon-shuiwen'></Image>
                            </View>
                        </Tabs.TabPane>
                    })}
                </Tabs>
            </View>
        </>
    )
}
